<template>
  <div class="all">
    <button v-for="(type1,index) in type" :key="index"
      :class="{'light':(selectIndex === index),'grey':(type1.unsatisfied)}" @click="change(index)">
      {{type1.name}}
      {{type1.count}}
    </button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        light: 'light',
        grey: 'grey',
        selectIndex: 0,
      }
    },
    props: ['type'],
    methods: {
      change(index) {
        this.selectIndex = index;
        this.grey = 'grey';
        this.light = 'light';
      }
    },
  }
</script>
<style lang="less" scoped>
  .all {
    border-top: 10px solid rgb(245, 245, 255);
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 10px;
    background-color: white;
  }

  button {
    height: 28px;
    line-height: 28px;
    border: 0;
    border-radius: 3px;
    background-color: white;
    margin: 5px;
    font-size: 15px;
    background-color: rgb(235, 245, 255);
    color: grey;
    padding-left: 6px;
    padding-right: 6px;
  }

  .light {
    background-color: rgb(49, 144, 232);
    color: white;
  }

  .grey {
    background-color: rgb(245, 245, 245);
  }
</style>